<template>
    <view class="container" :style="themeColor">
        <header-bar :config="config"></header-bar>
        <view class="">
            <view class="topbg"></view>
            <view class="main">
                <view class="title">
                    <iconsfont customIcons="icon-gerenxinxi1" color="#252528" size="38"></iconsfont>
                    <view>个人信息</view>
                </view>
                <view class="card-list">
                    <view class="flex-s-c">
                        <view class="name"><text class="xing-red">*</text>姓名</view>
                        <view>
                            <input
                                v-if="param.State == 0"
                                class="input"
                                type="text"
                                :disabled="param.State == 0"
                                placeholder-style="color:#cccccc"
                                v-model="param.ContactName"
                                placeholder="请输入你的姓名" />
                            <input
                                v-else
                                class="input"
                                type="text"
                                placeholder-style="color:#cccccc"
                                v-model="param.ContactName"
                                placeholder="请输入你的姓名" />
                        </view>
                    </view>
                    <view class="flex-s-c">
                        <view class="name"><text class="xing-red">*</text>手机号</view>
                        <view>
                            <input
                                v-if="param.State == 0"
                                class="input"
                                type="number"
                                :disabled="param.State == 0"
                                maxlength="11"
                                placeholder-style="color:#cccccc"
                                v-model="param.ContactTel"
                                placeholder="请输入你的手机号" />
                            <input
                                v-else
                                class="input"
                                type="number"
                                maxlength="11"
                                placeholder-style="color:#cccccc"
                                v-model="param.ContactTel"
                                placeholder="请输入你的手机号" />
                        </view>
                    </view>
                </view>
                <view class="title">
                    <iconsfont customIcons="icon-mendian" color="#252528" size="38"></iconsfont>
                    <view>提货点信息</view>
                </view>
                <view class="card-list">
                    <view class="flex-s-c">
                        <view class="name"><text class="xing-red">*</text>提货点名称</view>
                        <view>
                            <input
                                v-if="param.State == 0"
                                class="input"
                                type="text"
                                :disabled="param.State == 0"
                                placeholder-style="color:#cccccc"
                                v-model="param.TakeDeliveryName"
                                placeholder="请输入提货点名称" />
                            <input
                                v-else
                                class="input"
                                type="text"
                                placeholder-style="color:#cccccc"
                                v-model="param.TakeDeliveryName"
                                placeholder="请输入提货点名称" />
                        </view>
                    </view>
                    <view class="flex-s-c" @click="areaSelectFn">
                        <view class="name"><text class="xing-red">*</text>地址定位</view>
                        <view>
                            <view class="uni-input" :style="regionName == '请选择所在地区' ? 'color: #ccc;' : ''">{{
                                regionName
                            }}</view>
                        </view>
                    </view>
                    <view class="flex-s-c" @click="getLoaction">
                        <view class="name"><text class="xing-red">*</text>提货地址</view>
                        <view class="flex-s-s" style="flex: 1">
                            <input
                                v-if="param.State == 0"
                                class="input"
                                style="flex: 1"
                                :disabled="param.State == 0"
                                type="text"
                                placeholder-style="color:#cccccc"
                                v-model="param.ContactAddress"
                                placeholder="请先定位选择" />
                            <input
                                v-else
                                class="input"
                                style="flex: 1"
                                type="text"
                                placeholder-style="color:#cccccc"
                                v-model="param.ContactAddress"
                                placeholder="请先定位选择" />
                            <iconsfont customIcons="icon-dizhi" color="#333" size="30"></iconsfont>
                        </view>
                    </view>
                    <view class="flex-s-c">
                        <view class="name"><text class="xing-red">*</text>上传照片</view>
                        <view>
                            <view class="img-cell">
                                <view class="">
                                    <view class="add-img" v-if="imageList.length < 1" @tap="chooseImage()">
                                        <uni-icons type="camera" size="80"></uni-icons>
                                        <text>添加图片</text>
                                    </view>
                                </view>
                                <block
                                    v-for="(image, oneimageindex) in imageList"
                                    v-if="oneimageindex == 0"
                                    :key="oneimageindex">
                                    <view class="img-item">
                                        <image
                                            class="img"
                                            :src="easyGetImgUrl(image)"
                                            :data-src="easyGetImgUrl(image)"
                                            @tap="previewImage"></image>
                                        <view @click="del(oneimageindex)">
                                            <uni-icons
                                                class="btn-del"
                                                type="closeempty"
                                                customIcons="icon-white"></uni-icons>
                                        </view>
                                    </view>
                                </block>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="bottom-bar">
            <text class="btn btn-success" @click="submit">{{
                param.State == 0 ? "审核中" : param.State == 2 ? "已驳回" : "提交"
            }}</text>
        </view>
        <uni-popup ref="areaSelect" type="bottom" background-color="#fff" :safe-area="false">
            <area-select :address-data="param" @pickArea="pickArea"></area-select>
        </uni-popup>
		<privacy-agreement></privacy-agreement>
    </view>
	
</template>

<script>
import areaSelect from "@/uni-sub-base/components/area-select/area-select.vue"
import storage from "@/uni-sub-base/utils/storage.js"
import { uploadImage } from "@/service/api/file.js"
import { ApplyTakeDelivery, GetMyApplyTakeDelivery } from "@/service/api/takeDelivery.js"
import { userAddressAddOrEdit, userAddressDelete, batchSmartParse } from "@/service/api/member.js"
import privacyAgreement from "@/components/privacy-agreement/privacy-agreement.vue"
import { getLocation } from "@/uni-sub-base/utils/mapUtil.js"
import permision from "@/utils/permission.js"
import configAmap from "@/config/config.js"
export default {
    components: {
        areaSelect,
		privacyAgreement
    },
    data() {
        return {
            config: {
                title: "申请",
                back: true,
                color: ["#ffffff"],
                centerSlot: true,
                barPlaceholder: true,
            },
            pickerindex: 0,
            codedata: ["便利店", "商场"],
            param: {
                ContactName: "",
                ContactTel: "",
                TakeDeliveryName: "",
                TakeDeliveryCode: storage.getCache("userInfo").CardNumber,
                ProvinceId: 0,
                ProvinceName: "",
                CityId: 0,
                CityName: "",
                AreaId: 0,
                AreaName: "",
                StreetId: 0,
                StreetName: "",
                ContactAddress: "",
                Longitude: "",
                Latitude: "",
            },
            regionName: "请选择所在地区",
            imageList: [],
            imageUpList: [],
        }
    },
    created() {
        this.config.backgroundColor = [1, this.getThemeColor]
    },
    mounted() {
        this.GetMyApplyTakeDelivery()
    },
    methods: {
        GetMyApplyTakeDelivery() {
            GetMyApplyTakeDelivery().then((res) => {
                if (res.State == 1 && res.Data) {
                    this.param = res.Data
                    this.getRegionName()
                    this.imageList = this.param.ImageUrl.split(",")
                    this.imageUpList = this.param.ImageUrl.split(",")
                    // this.imageList.push(this.easyGetImgUrl(this.param.ImageUrl))
                    // this.imageUpList.push(this.param.ImageUrl)
                } else {
                    // this.easyToast(res.Msg)
                }
            })
        },
        bindPickerChange(index, value) {
            this.fromData[index].Value = value
        },
        //选择地区
        areaSelectFn() {
            if (this.param.State == 0) {
                return
            }
            this.$refs.areaSelect.open()
        },
        //选择地区回调
        pickArea(data) {
            this.$refs.areaSelect.close()
            this.param = Object.assign(this.param, data)
            this.getRegionName()
        },
        getRegionName() {
            let line = "-"
            this.regionName = `${this.param.ProvinceName || ""}-${this.param.CityName || ""}${
                this.param.AreaName ? line + this.param.AreaName : ""
            }${this.param.StreetName ? line + this.param.StreetName : ""}`
        },
        //选择图片
		//#ifdef APP
		async chooseImage() {
			if (this.param.State == 0) {
			    return
			}
			const result = await permision.premissionCheck("EXTERNAL_STORAGE")
			if(result == 1) {  
			    // 此处处理各自业务 如：uni.chooseImage  
				let that = this
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ["album"], //从相册选择
				    success: function (res) {
				        that.upLoadPicFn(res)
				    },
				})
			}
		},
		//#endif
		// #ifndef APP
        chooseImage() {
            if (this.param.State == 0) {
                return
            }
            let that = this
            uni.chooseImage({
                count: 1, //默认9
                sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ["album"], //从相册选择
                success: function (res) {
                    that.upLoadPicFn(res)
                },
            })
        },
		// #endif
        //删除图片
        del(index) {
            if (this.param.State == 0) {
                return
            }
            this.imageList.splice(index, 1)
            this.imageUpList.splice(index, 1)
        },
        //上传图片
        upLoadPicFn(files) {
            let param = {
                filePath: files.tempFilePaths[0],
                formData: {},
            }
            uploadImage(param).then((e) => {
                if (e.Data) {
                    this.imageList.push(e.Data.FullPath)
                    this.imageUpList.push(e.Data.Path)
                }
            })
        },
        //预览图片
        previewImage(e) {
            var current = e.target.dataset.src
            uni.previewImage({
                current: current,
                urls: this.imageList,
            })
        },
        getLoaction() {
            if (this.param.State == 0) {
                return
            }
            //#ifdef MP-WEIXIN
            this.getCenterLocation()
            //#endif
            //#ifdef APP
            uni.navigateTo({
                url: "/pages_me/packet/map/map-poi",
                events: {
                    getSelectData: (data) => {
                        this.getAppP(data)
                        this.param.Longitude = data.location.longitude
                        this.param.Latitude = data.location.latitude
                        this.param.ContactAddress = data.name + data.address.replace(/\\/g, "")
                    },
                },
            })
            //#endif
            //#ifdef H5
            getLocation(
                (res) => {
                    if (res) {
                        this.data.ContactAddress = res.address.street + res.address.streetNum

                        this.getP(res.address)
                    }
                },
                (err) => {
                    console.log(err)
                },
            )
            //#endif
        },
        getCenterLocation() {
            var that = this
            wx.authorize({
                scope: "scope.userLocation",
                complete: function (res) {
                    wx.chooseLocation({
                        success(str) {
                           var getAddressUrl ='https://restapi.amap.com/v3/geocode/regeo?output=JSON&location='+str.longitude+','+str.latitude +
                               "&key=" +configAmap.aMapKey.wx
                            wx.request({
                                url: getAddressUrl,
                                success: function (result) {
                                    var province = result.data.regeocode.addressComponent.province
                                    var city = result.data.regeocode.addressComponent.city
                                    var district = result.data.regeocode.addressComponent.district
                                    var address = result.data.regeocode.addressComponent.township+result.data.regeocode.addressComponent.streetNumber.street+result.data.regeocode.addressComponent.streetNumber.number
                                    
                                    // that.data.ContactAddress =province+city+district+address
                                    that.data.Longitude = str.longitude
                                    that.data.Latitude = str.latitude
                                    that.getmapP(
                                       result.data.regeocode.addressComponent,
                                       address
                                    )
                                },
                            })
                        },
                    })
                },
            })
        },
        getAppP(res) {
            let item = {
                ContactAddress: res.address,
                ProvinceName: res.province,
                CityName: res.city,
                AreaName: res.district,
                ContactName: this.param.ContactName || "aaa",
                ContactTel: this.param.ContactTel || "13300000000",
            }
            let list = []
            list.push(item)
            let param = {
                list: list,
            }
            this.batchSmartParse(param)
        },
        getmapP(res, address) {
            let item = {
                ContactAddress: address,
                ProvinceName: res.province,
                CityName: res.city,
                AreaName: res.district,
                StreetName: res.township,
                ContactName: this.data.ContactName || "aaa",
                ContactTel: this.data.ContactTel || "13300000000",
            }
            let list = []
            list.push(item)
            let param = {
                list: list,
            }
            this.batchSmartParse(param)
        },
        //智能识别
        batchSmartParse(param) {
            batchSmartParse(param).then((res) => {
                if (res.Data && res.Data.list && res.Data.list.length > 0) {
                    let result = res.Data.list[0]
                    this.param.ProvinceId = result.ProvinceId
                    this.param.ProvinceName = result.ProvinceName
                    this.param.CityId = result.CityId
                    this.param.CityName = result.CityName
                    this.param.AreaId = result.AreaId
                    this.param.AreaName = result.AreaName
                    this.param.StreetId = result.StreetId
                    this.param.StreetName = result.StreetName
                    this.getRegionName()
                }
            })
        },
        submit() {
            if (this.param.State == 0) {
                return
            }
            if (this.param.ContactName == "") {
                this.easyToast("请输入你的姓名")
                return
            }
            if (this.param.ContactTel == "") {
                this.easyToast("请输入你的手机号")
                return
            }
            if (this.param.TakeDeliveryName == "") {
                this.easyToast("请输入提货点名称")
                return
            }
            if (this.param.ContactAddress == "") {
                this.easyToast("请输入提货地址")
                return
            }
            if (this.param.provinceId == 0) {
                this.easyToast("请选择所在地区")
                return
            }
            if (this.param.Longitude == "") {
                this.easyToast("请定位提货地址")
                return
            }
            if (this.imageUpList.length == 0) {
                this.easyToast("请上传店铺图片")
                return
            }
            this.param.imageUrl = this.imageUpList.join(",")
            ApplyTakeDelivery(this.param).then((res) => {
                if (res.State == 1) {
                    this.easyToast("提交成功")
                    setTimeout((e) => {
                        this.easyGoBack()
                    }, 1000)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
    },
}
</script>

<style lang="scss">
page {
    background: #f7f9fb;
}
.container {
    padding-bottom: 130rpx;
}
.topbg {
    height: 244rpx;
    background: $app-color-main;
}
.main {
    position: relative;
    margin: -206rpx 24rpx 0 24rpx;
    border-radius: 16px;
    background: #ffffff;
    .title {
        height: 110rpx;
        display: flex;
        align-items: center;
        background: #f4f5f6;
        padding-left: 24rpx;
        font-weight: bold;
        font-size: 32rpx;
        border-radius: 16px 16px 0 0;
        & > view {
            padding-left: 24rpx;
        }
    }
}
.icon-w {
    font-weight: bold;
}
.card-list {
    margin-bottom: 24rpx;
    background: #ffffff;
    border-radius: 8rpx;

    .flex-s-c {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: $font-size-30;
        color: $color-gray-1;
        background: $uni-bg-color;
        // background: #ccc;
        padding: 34rpx 0;
        margin: 0 24rpx;
        border-bottom: 1rpx solid #ebebeb;

        .name {
            width: 180rpx;
            overflow: hidden;
            text-overflow: -o-ellipsis-lastline;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            -webkit-box-orient: vertical;
            color: #333333;
        }

        input {
            text-align: left;
        }
    }

    & > .flex-s-c:first-child {
        border-radius: 8rpx 8rpx 0 0;
    }

    & > .flex-s-c:last-child {
        border-radius: 0 0 8rpx 8rpx;
        border: none;
    }

    .w60 {
        width: 60%;
        text-align: right;
    }
}
.bottom-bar {
    .btn {
        width: 100%;
        margin-left: 0;
        height: 88rpx;
        font-size: 32rpx;
    }
}
.xing-red {
    color: red;
}
</style>
